<template>
  <div class="userInfo">
    <div class="left">
      <el-form label-position="left" label-width="150px">
        <el-form-item>
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8888/api/common/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img :src="imageUrl" class="avatar" />
<!--            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>-->
          </el-upload>
        </el-form-item>
        <el-form-item label="昵称:">
          <span>李星河</span>
        </el-form-item>
        <el-form-item label="手机号/账号:">
          <span>18511111112</span>
        </el-form-item>
        <el-form-item label="余额:">
          <span style="color: orangered;font-size: 20px">￥1812</span>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input show-password placeholder="旧密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码:">
          <el-input show-password placeholder="新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码:">
          <el-input show-password placeholder="再次输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="large" @click="upavtar">修改</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="right">
      <el-link style="font-size: 30px" type="success">当前时间</el-link>
      <p>{{datestr}}</p>
      <div class="precise">
        <clock></clock>
      </div>
      <span > <b>「</b><i id="jinrishiciSentence"></i><b>」</b></span>
    </div>
  </div>
</template>

<script setup>
  import { reactive, ref,onMounted ,onUnmounted} from 'vue'
  import { ElMessage } from 'element-plus'
  import clock from "@/components/clock";
  import serve from "@/api/server";
  import request from "@/api/request"; //不加花括号 默认引入导出

  const imageUrl = ref('http://lixinghe.meimeng.eu.org/flower/image/favction.jpg')
  const handleAvatarSuccess = (response, uploadFile) => {
    console.log(response);
    imageUrl.value = 'http://localhost:8888/api/'+ response.data
  }

  const beforeAvatarUpload = () => {

  }

  const upavtar = () => {
    ElMessage.success('请稍后，正在拉起网络')
  }
  let datestr = ref('')

  let getDate = () => {
    //获取当前时间
    const date = new Date();
    const year = date.getFullYear()
    let month = date.getMonth()+1 < 10? "0" + parseInt(date.getMonth()+1) : parseInt(date.getMonth()+1)
    let day = date.getDate() < 10? "0" + date.getDate() : date.getDate()
    let hours = date.getHours() < 10? "0" + date.getHours() : date.getHours()
    let minutes = date.getMinutes() < 10? "0" +date.getMinutes() : date.getMinutes()
    let seconds = date.getSeconds() < 10? "0" +date.getSeconds() : date.getSeconds()
    //格式化为本地时间格式
    datestr.value = year+"年"+month+"月"+day+"日"

    //获取div
    let div1 = document.getElementById("times");
    let obianhua = document.getElementById("bianhua")
    //将时间写入div
    // div1.innerHTML = datestr;
    // obianhua.innerHTML = bianhuadate
  }

  //使用定时器每秒向div写入当前时间
  setInterval(getDate,1000);

  let pome = ref('')

  let sendReq = request()
  const getPome = () => {
    let params = {
      url:'sentence',
      method:'GET'
    }
    pome.value = '人面不知何处去，桃花依旧笑春风'
    //请求今日诗词 api 接口
    sendReq(params,(res) => {
      console.log(res.status);
      pome.value = res.content
      console.log(pome.value);
    })
    setTimeout(text,1000)
  }

  onMounted(() => {
    getPome()
  })

  onUnmounted(() => {
    clearInterval(timer);
  })

  let timer = ref(null)
  //文字加载动画
  const text = () => {
    console.log('我被触发了');
    let a = document.getElementById('jinrishiciSentence');
    timer = setInterval(() => {
      a.innerHTML = a.innerHTML + pome.value.substring(0, 1);
      pome.value = pome.value.substring(1);
      if (pome.value.length === 0) {
        clearInterval(timer);
      }
      console.log(a);
    },300)
  }

  //注册组件
  {
    clock
  }

</script>

<style scoped lang="scss">
  p {
    margin: 0;
    padding: 0;
  }
  .userInfo {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 10px 0;
    .left {
      margin-top: 20px;
      margin-left: 50px;
      width: 500px;
      padding: 20px;
      text-align: left;
    }
    .right {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      height: 300px;
    }
  }
  .el-input {
    width: 200px;
  }
  .avatar-uploader .avatar {
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 50%;
  }
  .test {
    width: 100px;
    perspective: 1000px;
    height: 100px;
    margin-left: 30px;
    background: #f1e3e3;
    transition: width 1s;
    &:hover {
      width: 200px;
      transform: rotateY(-180deg);
    }
  }
</style>
